<script>
import TableWrapper from "./TableWrapper";
export default {
  components: { "el-table": TableWrapper },
  name: "GTable",
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
    config: {
      type: Object,
      default: () => ({}),
    },
    pager: {
      type: Object,
      // default: () => ({}),
      required:true
    },
  },
  data() {
    // console.log(this.config, "接收的");
    let inner = {
      multipleSelection: false,
      index: true,
      tableConf: {
        // attrs 原生属性
        stripe: true, // 斑马纹
        border: true, // 边框
        // height: 340
      },
    };
    let innerPager = {
      currentPage: 1,
      pageSizes: [10, 20, 30, 40],
      pageSize: 10,
      layout: "total, sizes, prev, pager, next, jumper",
      total: 400, // 后端给
    };
    // console.log(inner, "默认的");
    Object.assign(inner, this.config);
    Object.assign(innerPager, this.pager);
    return { innerConfig: inner, finalPager: innerPager };
  },
  render() {
    const { usePager, tableConf } = this.innerConfig;
    const {
      pager,finalPager,
      columns,
      $parent: { isLoading },
    } = this;
    // console.log(this.$slots); // 了解，后续没有了
    // console.log(this.$scopedSlots);
    // const scopedSlots = {
    //   append(scoped) {
    //     console.log(scoped, "scoped");
    //     return <h1>表格末尾</h1>;
    //   },
    // };
    // console.log(this.$scopedSlots.append());
    const directives = [
      { name: "drag", value: ".el-table__body-wrapper" },
      { name: "loading", value: isLoading },
    ];
    //{ ...{directives} }
    // directives={ directives }

    // JSX中批量传入事件
    console.log("事件:", this); // selection-change
    // const onxxx={
    //   on:{
    //     click(){
    //       alert('1eeee')
    //     }
    //   }
    // }
    const listeners = {
      on: {
        ...this.$listeners,
      },
    };
    return (
      <div>
        {/* <el-button {...onxxx}>测试按钮</el-button> */}
        <el-table
          {...{ directives }}
          {...listeners}
          // scopedSlots={scopedSlots}
          scopedSlots={this.$scopedSlots}
          attrs={tableConf}
          data={this.tableData}
          style="width: 100%"
        >
          {this.renderSpicalRows()}
          {/*{this.renderRows(columns)} */}
          {this.renderRowsWithSlot(columns)}
          {/* <div slot="append">
             <h1>表格末尾</h1>
           </div> */}
        </el-table>
        {/*  {usePager && this.renderPager(pager)}*/}
        {usePager && this.renderPager(finalPager,pager)}
      </div>
    );
  },
  methods: {
    renderSpicalRows() {
      let rows = [];
      const { index, multipleSelection } = this.innerConfig;
      if (multipleSelection) {
        rows.push(<el-table-column type="selection" width="55" />);
      }
      if (index) {
        rows.push(<el-table-column type="index" width="50" />);
      }
      return rows;
    },
    renderRows(columns) {
      // 用GTable帮el-table-column渲染子元素
      return columns.map((col) => (
        <el-table-column prop={col.prop} label={col.label} width={col.width}>
          {/* 插槽default */}
          {/* {this.$scopedSlots.address("我是地址")} */}
          {this.$scopedSlots[col.prop] && this.$scopedSlots.address("我是地址")}

          {/*自定义html*/}
          {col.formatter && <div domPropsInnerHTML={col.formatter("我是自定义HTML")} />}
          {/*递归方法调用*/}
          {col.children && this.renderRows(col.children)}
        </el-table-column>
      ));
    },
    renderRowsWithSlot(columns) {
      // 用GTable帮el-table-column渲染子元素
      return columns.map((col) => (
        /* 
        1. 递归输出组件 
        2.做个性化属性输出 
        3.让el-table-column来渲染内容
        */
        <GColumn item={col} scopedSlots={this.$scopedSlots} />
      ));
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    renderPager(pager,outterPager) {
      return (
        <el-pagination
          onSize-change={(e) => this.$emit("handleSizeChange", e)}
          onCurrent-change={(e) => this.$emit("handleCurrentChange", e)}
          // onCurrent-change={this.$emit.bind(this,"handleCurrentChange")}
          currentPage={pager.currentPage}
          pageSizes={pager.pageSizes}
          pageSize={pager.pageSize}
          layout={pager.layout}
          total={outterPager.total}
        />
      );
    },
  },
};
</script>
